<template>
   <div class="manage">
      <!-- 点击新增或者编辑时弹出的会话框 -->
      <el-dialog :title="operateType === 'add' ? '新增用户' : '更新用户'" :visible.sync="isShow" v-if="isShow">
         <!-- CommonForm组件数据的绑定 -->
         <common-form :formLabel="operateFormLabel" :form="operateForm" :inline="true" ref="form"></common-form>
         <!-- 会话框下的取消与确定 -->
         <div slot="footer" class="dialog-footer">
            <el-button @click="isShow = false">取消</el-button>
            <el-button type="primary" @click="confirm">确定 </el-button>
         </div>
      </el-dialog>

      <!-- 右侧的搜索功能以及公用表单组件的数据绑定 -->
      <div class="manage-header">
         <el-button type="primary" @click="addUser">+ 新增 </el-button>
         <common-form :formLabel="searchFormLabel" :form="searchForm" :inline="true" ref="form">
            <el-button type="primary" @click="getList(searchForm.keyword)">搜索 </el-button>
         </common-form>
      </div>

      <!-- 公用表格组件的数据绑定 -->
      <common-table :tableData="tableData" :tableLabel="tableLabel" :config="config" @changePage="getList()"
         @edit="editUser" @del="delUser">
      </common-table>
   </div>
</template>

<script>
import CommonForm from "@/components/CommonForm";
import CommonTable from "@/components/CommonTable";
import { getUser } from '../../api/data';

export default {
   name: "User",
   components: {
      CommonForm,
      CommonTable
   },
   data() {
      return {
         operateType: "add",
         // 控制会话框的显示
         isShow: false,
         // 会话框里的每一个属性
         operateFormLabel: [
            {
               model: "name",
               label: "姓名",
               type: "input",
            },
            {
               model: "age",
               label: "年龄",
               type: "input",
            },
            {
               model: "sex",
               label: "性别",
               type: "select",
               opts: [
                  {
                     label: "男",
                     value: 1,
                  },
                  {
                     label: "女",
                     value: 0,
                  },
               ],
            },
            {
               model: "birth",
               label: "出生日期",
               type: "date",
            },
            {
               model: "addr",
               label: "地址",
               type: "input",
            },
         ],
         // 新增时初始化绘画框里面每个输入框的值
         operateForm: {
            name: "",
            addr: "",
            age: "",
            birth: "",
            sex: "",
         },
         // 搜索框
         searchFormLabel: [
            {
               model: "keyword",
               label: "",
               type: "input",
            },
         ],
         // 搜索功能数据
         searchForm: {
            keyword: '',
         },
         // 用户列表数据
         tableData: [],
         // 用户表格每一列的标签
         tableLabel: [
            {
               prop: "name",
               label: "姓名",
            },
            {
               prop: "age",
               label: "年龄",
            },
            {
               prop: "sex",
               label: "性别",
            },
            {
               prop: "birth",
               label: "出生日期",
               width: 200,
            },
            {
               prop: "addr",
               label: "地址",
               width: 320,
            },
         ],
         // 分页默认数据以及总页数的初始值
         config: {
            page: 1,
            total: 1,
         },
      };
   },
   methods: {
      // 判断添加还是修改用户操作
      confirm() {
         if (this.operateType === "edit") {
            this.$http.post("/user/edit", this.operateForm).then((res) => {
               this.isShow = false;
               this.getList()
               console.log(res);
            });
         } else {
            this.$http.post("/user/add", this.operateForm).then((res) => {
               console.log(res);
               this.isShow = false;
               this.getList()
            });
         }
      },
      // 添加用户操作
      addUser() {
         this.isShow = true;
         this.operateType = 'add',
            this.operateForm = {
               name: "",
               addr: "",
               age: "",
               birth: "",
               sex: "",
            };
      },
      // 编辑用户信息
      editUser(row) {
         //点击取消也会修改数据源
         // this.operateType = 'edit'
         // this.isShow = true
         // this.operateForm = row
         // console.log("rowis", row)
         //是vue双向数据绑定的弊端，实时更新数据，因为是一个数据源，修改对象的时候，对象指针直接指向页面数据了，改成:
         let userInfo = this
         this.operateType = 'edit'
         this.isShow = true
         userInfo.operateForm = { ...row }
         console.log("that.operateForm", userInfo.operateForm)
      },
      // 删除用户
      delUser(row) {
         this.$confirm('此操作将永久删除该组件,是否继续?', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
         }).then(() => {
            const id = row.id
            this.$http.get('user/del', {
               params: { id }
            }).then(() => {
               this.$message({
                  type: 'success',
                  message: '删除成功'
               })
               this.getList()
            })
         })
      },
      // 获取用户数据
      getList(name = '') {
         this.config.loading = true
         name ? (this.config.page = 1) : ''
         getUser({
            page: this.config.page,
            name
         }).then(({ data: res }) => {
            // 打印出从接口得到的数据
            console.log(res, 'res');
            this.tableData = res.list.map(item => {
               // if (item.sex == 0) {
               //    item.sex = '女'
               // } else {
               //    item.sex = '男'
               // }
               item.sexLabel = item.sex === 0 ? "女" : "男"
               item.sex = item.sexLabel
               // console.log(item.sex);
               return item
            })
            this.config.total = res.count
            this.config.loading = false
         })
      },
   },
   // 首次加载页面时将表格渲染
   created() {
      this.getList()
   },
};
</script>

<style lang="less" scoped>
.manage {
   height: 100%;
   // background-color: skyblue;
}

.manage-header {
   display: flex;
   // background-color: aqua;
   justify-content: space-between;
   align-items: center;
}
</style>